<template>
	<div>
		<span>当前页</span>
		<input type="checkbox" v-model="active" />
		<span>所有页</span>
		<input type="checkbox" v-model="all" />
		<span>已选数量:{{checkAmount}}</span>

		<slot name="list"></slot>

		<button @click="changPage(1)">1</button>
		<button @click="changPage(2)">2</button>
		<table>
			<tr>
				<th></th>
				<th v-for="item in userHeader">
					{{item.name}}
				</th>
			</tr>
			<tr v-for="list in users">
				<td>
					<input type="checkbox" :value="list.id" v-model="checkedArr2" />
					<!--<input type="radio" :value="list.id" v-model="checkedArr3" />-->
				</td>
				<td v-for="item in userHeader" @click="goUrl(item)" v-html='renderFn(list, item)'></td>
			</tr>
		</table>
		<div>
		</div>
	</div>
</template>

<script>
  /*
  基本需求：inputbox v-model
  额外需求：
  1，我需要翻页，记录翻页后新add的id（自动）
  2，我需要当前页，把当前页全部勾选，
      直接改数组，为当前页所有id + 其他id，传出去
  3，我需要所有页
      传null出去，但是checkedArr只为当前页所有id
  */
	export default {
		props: {
			totals: {
				default: 0,
				type: Number
			},
			checkedArr: {
				default() {
					return []
				}
			},
			userHeader: {
				default() {
					return []
				}
			},
			users: {
				default() {
					return []
				}
			}
		},
		data() {
			return {
			}
		},
		computed: {
			active: {
				get: function() {
					var a = false
					if (this.checkedArr === null || this.users.length > 0 && this.users.filter(user => this.checkedArr.indexOf(user.id) !== -1).map(user => user.id).length === this.users.length) {
            // todo checkedArr包含当前页所有id
						a = true
					} else {
						a = false
					}
					return a
				},
				set: function(arg) {
          if (!arg) {
            this.$emit('valueChange', [])
            // todo 传排除了当前页的
          } else {
            const activeIds = this.users.map(user => user.id)         // 当前页id
            const emitIdArr = this.checkedArr.filter(user => activeIds.indexOf(user) === -1).concat(activeIds)          // 排除了当前页的再加上当前页
            this.$emit('valueChange', emitIdArr)
            // todo 传当前页的id和其他页的id
          }
				}
			},
			all: {
				get: function() {
					if(this.checkedArr === null || this.checkedArr.length === this.totals) {
						return true
					} else {
						return false
					}
				},
				set: function(arg) {
					if (arg === true) {
            this.$emit('valueChange', null)
            // todo 传null出去
					} else {
            this.$emit('valueChange', [])
            // todo 传空数组
					}
				}
			},
			checkedArr2: {
				get: function () {
					if (this.checkedArr === null) {
						return this.users.map(user => user.id)
            // todo return this.users的id
					} else {
						return this.checkedArr
					}
				},
        set: function(arr){
          // arr 为get中的值
          this.$emit('valueChange', arr)
        }
			},
      checkedArr3: {
        get () {
          return this.checkedArr2[0]
        },
        set (val) {
          this.$emit('valueChange', [val])
        }
      },
      checkAmount () {
				if (this.checkedArr) {
					return this.checkedArr.length
				} else {
					return this.totals
				}
			}
		},
		methods: {
			renderFn(list, item) {
				return list[item.key]
			},
			goUrl(item) {
				if(item.type === 'link') {
					alert(item.url)
				}
			},
			changPage(page) {
				this.$emit('pageChange', page)
			},
		}
	}
</script>